<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./utils/layui/css/layui.css" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body,
      html {
        width: 100%;
        height: 100%;
      }
      button {
        margin-top: 20px;
      }
      #content {
        width: 100%;
        height: 100%;
        z-index: 2;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #background {
        background: url("./background.jpg");
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      #black {
        background-color: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div id="content" class="layui-form">
      <div class="layui-btn-container" style="width: 100px; margin-right: 10px">
        <button
          id="playVideo"
          type="button"
          class="layui-btn layui-btn-radius layui-btn-normal"
        >
          <i class="layui-icon">&#xe652;</i>播放
        </button>
        <button
          id="pauseVideo"
          type="button"
          class="layui-btn layui-btn-radius layui-btn-normal"
        >
          <i class="layui-icon">&#xe651;</i>暂停
        </button>
        <button
          id="speed"
          type="button"
          class="layui-btn layui-btn-radius layui-btn-warm"
        >
          <i class="layui-icon">&#xe65b;</i>快进
        </button>
        <button id="reverse" type="button" class="layui-btn layui-btn-radius">
          <i class="layui-icon">&#xe65a;</i>快退
        </button>
        <button
          type="button"
          id="muted"
          class="layui-btn layui-btn-radius layui-btn-danger"
        >
          <i class="layui-icon">&#xe685;</i>静音
        </button>
        <!-- <button
          type="button"
          id="qrcode"
          class="layui-btn layui-btn-radius layui-btn-normal"
        >
          <i class="layui-icon">&#xe663;</i>二维码
        </button> -->
      </div>
      <div id="mse"></div>
    </div>
    <div id="black"></div>
    <div id="background"></div>
  </body>
</html>
<script src="/utils/player.js"></script>
<script src="/utils/jquery.js"></script>
<script src="/utils/layui/layui.all.js"></script>
<script src="/utils/websocket1.js"></script>
<script>
  var player = new Player({
    id: "mse",
    url: "http://h5player.bytedance.com/video/mp4/xgplayer-demo-720p.mp4",
    width: 900,
    height: 506,
    // 'x5-video-player-type': 'h5',
    playsinline: true,
    autoplay: true,
  });

  player.on("canplay", function () {
    player.muted = true;
  });

  var newClient = new Webclient("ws://59.44.19.196:8083/wstest/chat");

  newClient.connect(); // 建立连接

  // 播放视频
  $("#playVideo").click(function () {
    if (!player.hasStart) {
      newClient.sendMessage("playvideo");
    }
    if (player.paused) {
      newClient.sendMessage("continuevideo");
    }
  });

  // 暂停视频
  $("#pauseVideo").click(function () {
    if (!player.paused) {
      newClient.sendMessage("pausevideo");
    } else {
      newClient.sendMessage("continuevideo");
    }
  });

  // 快进视频
  $("#speed").click(() => {
    newClient.sendMessage("speedvideo");
  });

  // 快退
  $("#reverse").click(() => {
    newClient.sendMessage("backvideo");
  });

  // 静音
  $("#muted").click(() => {
    newClient.sendMessage("mutedvideo");
  });
</script>
